<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7事件处理</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="demo">
    <h2>1.绑定监听</h2>
    <button @click="test1">test1</button>
    <button @click="test2('hello test2')">test2</button>
    <button @click="test3(123,$event)">test3</button>

    <h2>2.事件修饰符 @click.stop, @click.prevent</h2>
    <div style="width: 200px; height: 200px; background-color: red" @click="test5">
        <div style="width: 100px; height: 100px; background-color: green" @click.stop="test6"></div> <!--@click.stop：可以阻止事件冒泡-->
    </div>
    <a href="http://www.baidu.com" @click.prevent="test7">百度</a><!--@click-prevent：可以组织事件默认行为-->

    <h3>3.按键修饰符 @keyup</h3>
    <input type="text" @keyup.13="test8"><!--13：enter键 键码-->
    <input type="text" @keyup.enter="test8"><!--enter键 键码-->
</div>
   <script>
       let app = new Vue({
           el: '#demo',
           data: {

           },
           methods:{
               test1(){
                   alert('test1');
               },
               test2(msg){
                   alert(msg);
               },
               test3(msg,event){
                   alert(msg + event.target.innerText);
               },
               test5(){
                   alert("test5");
               },
               test6(){
                  // event.stopPropagation();//阻止事件冒泡
                   alert("test6");
               },
               test7(){
                   //event.preventDefault(); //阻止事件默认行为
                   alert("test7");
               },
               test8(event){
                   alert(event.target.value);
               }
           }
       });
   </script>
</body>
</html>